<script setup lang="ts">
defineOptions({
  name: 'Home',
});

const themeStore = useThemeStore();

const { data } = await useFetch('/api/test');
console.log(data.value);

// 当前主题模式
const currentThemeMode = computed(() => {
  return themeStore.themeMode;
});

// 是否为暗色模式
const isDarkMode = computed(() => {
  return themeStore.isDark;
});
</script>

<template>
  <div class="home">
    <!-- 主题信息卡片 -->
    <n-card class="mb-6 bg-white dark:bg-gray-800">
      <div class="text-gray-800 dark:text-gray-200">
        <h2 class="text-xl font-bold mb-4">
          当前主题设置
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
            <p class="font-medium">
              主题模式:
            </p>
            <p class="text-lg">
              {{ currentThemeMode === 'auto' ? '自动' : currentThemeMode === 'dark' ? '深色' : '浅色' }}
            </p>
          </div>
          <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
            <p class="font-medium">
              当前显示:
            </p>
            <p class="text-lg">
              {{ isDarkMode ? '深色模式' : '浅色模式' }}
            </p>
          </div>
        </div>
      </div>
    </n-card>

    <!-- Naive UI 组件展示 -->
    <n-card title="Naive UI 组件" class="mb-6 bg-white dark:bg-gray-800">
      <n-space vertical>
        <div class="mb-4">
          <h3 class="text-lg font-medium mb-2 text-gray-800 dark:text-gray-200">
            按钮
          </h3>
          <n-space>
            <n-button>默认</n-button>
            <n-button type="tertiary">
              次要
            </n-button>
            <n-button type="primary">
              主要
            </n-button>
            <n-button type="info">
              信息
            </n-button>
            <n-button type="success">
              成功
            </n-button>
            <n-button type="warning">
              警告
            </n-button>
            <n-button type="error">
              错误
            </n-button>
          </n-space>
        </div>

        <div class="mb-4">
          <h3 class="text-lg font-medium mb-2 text-gray-800 dark:text-gray-200">
            开关
          </h3>
          <n-space>
            <n-switch />
            <n-switch default-value />
          </n-space>
        </div>

        <div>
          <h3 class="text-lg font-medium mb-2 text-gray-800 dark:text-gray-200">
            输入框
          </h3>
          <n-input placeholder="请输入内容" class="max-w-md" />
        </div>
      </n-space>
    </n-card>

    <!-- Tailwind 暗色模式展示 -->
    <n-card title="Tailwind 暗色模式" class="mb-6 bg-white dark:bg-gray-800">
      <div class="space-y-4">
        <div class="p-4 bg-white dark:bg-gray-700 rounded-lg shadow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-white">
            文本颜色
          </h3>
          <div class="mt-2 space-y-2">
            <p class="text-gray-900 dark:text-white">
              默认文本 (text-gray-900 / text-white)
            </p>
            <p class="text-gray-600 dark:text-gray-300">
              次要文本 (text-gray-600 / text-gray-300)
            </p>
            <p class="text-blue-600 dark:text-blue-400">
              链接文本 (text-blue-600 / text-blue-400)
            </p>
          </div>
        </div>

        <div class="p-4 bg-white dark:bg-gray-700 rounded-lg shadow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-white">
            背景颜色
          </h3>
          <div class="mt-2 grid grid-cols-2 md:grid-cols-4 gap-2">
            <div class="p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded">
              <span class="text-sm text-gray-800 dark:text-gray-200">白色/深灰</span>
            </div>
            <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded">
              <span class="text-sm text-gray-800 dark:text-gray-200">浅灰/中灰</span>
            </div>
            <div class="p-4 bg-blue-100 dark:bg-blue-900 rounded">
              <span class="text-sm text-blue-800 dark:text-blue-200">浅蓝/深蓝</span>
            </div>
            <div class="p-4 bg-green-100 dark:bg-green-900 rounded">
              <span class="text-sm text-green-800 dark:text-green-200">浅绿/深绿</span>
            </div>
          </div>
        </div>

        <div class="p-4 bg-white dark:bg-gray-700 rounded-lg shadow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-white">
            自定义按钮
          </h3>
          <div class="mt-2 grid grid-cols-2 md:grid-cols-4 gap-2">
            <button class="btn btn-primary">按钮</button>
          </div>
        </div>
      </div>
    </n-card>

    <!-- 主题切换按钮 -->
    <div class="flex justify-center mt-8">
      <n-button type="primary" @click="themeStore.toggleTheme()">
        切换到{{ isDarkMode ? '浅色' : '深色' }}模式
      </n-button>
    </div>
  </div>
</template>

<style scoped>
.home {
  /* 添加过渡效果 */
  transition: all 0.3s ease;
}
</style>
